
<template>
    <div class="tabs">
      <div class="tabs-tilte">
        <!-- 标签页标题，这里使用v-for -->
        <div
          v-for="(item,index) in navList"
          :key="item.name"
          :class="tabCls(item)"
          @click="handleChange(index)"
        >
          <!-- tab名字 -->
          {{item.label}}
        </div>
      </div>
      <div class="tabs-content">
        <!-- 这里的slot就是嵌套的内容pane -->
        <slot>我就一个中介 载着pane去塞进主页面的</slot>
      </div>
    </div>
</template>

<script>
export default {
  name: 'tabs',
  props: {
    // value: {
    //   type: [String, Number]
    // }
  },
  data () {
    return {
      navList: [],
      close: false,
      currentValue: this.value
    }
  },
  watch: {
    value (val) {
      this.currentValue = val
      console.log(this.currentValue)
    },
    currentValue () {
      // console.log(this.currentValue)
      // this.updateStatus()
    }
  },
  methods: {
    getTabs () {
      //通过遍历子组件，得到所有的pane组件
      return this.$children.filter(function (item) {
        return item.$options.name === 'pane'
      })
    },
    updateNav () {
      this.navList = []
      //设置对this的引用
      var _this = this
      this.getTabs().forEach(function (pane, index) {
        // console.log(pane)
        _this.navList.push({
          label: pane.label,
          name: pane.name || index,
        })
        // console.log(_this.navList)
        //如果没有给pane设置name，默认设置它的索引
        // if (!pane.name) {
        //   console.log(pane)
        //   pane.name = index
        // }
        //设置当前选中tab的索引
        if (index === 0) {
          if (!_this.currentValue) {
            // console.log(!_this.currentValue)//_this.currentValue=undefined 这里是!undefinend
            _this.currentValue = pane.name || index
            // console.log(pane.name) //123
          }
        }
      })
      this.updateStatus()
    },

    /* 更新显示的状态，显示当前选中的tab，隐藏没有选中的tab */
    updateStatus () {
      var tabs = this.getTabs()
      var _this = this
      /* 遍历当前tabs找出当前选择的tab */
      tabs.forEach(tab => {
        // console.log(tab)
        if (tab.name === _this.currentValue) {
          tab.show = true
          tab.close = true
        } else {
          tab.show = false
          tab.close = false
        }
        //可简写为
        // console.log(tab.name)
        // return tab.show = tab.name === _this.currentValue
        // return tab.close = tab.name === _this.currentValue
      })
    },
    //设置当前选中tab的样式
    tabCls (item) {
      return [  //calss="tabs-tab tabs-tab-active"
        'tabs-tab',
        { 'tabs-tab-active': item.name === this.currentValue }
      ]
    },


    handleChange (index) {
      // console.log(index)
      var nav = this.navList[index]//数组中根据索引找当前的对象
      // console.log(nav)
      var name = nav.name
      this.currentValue = name
      this.updateStatus() //这里调或者一进来watcher监视调用都可以
      // this.$emit('input', name)
    }
  }
}
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.tabs {
  font-size: 14px;
  color: #fff;
  padding: 20px;
}
.tabs-content {
  content: "";
  display: block;
  width: 60%;
  height: 400px;
  border: 1px solid #9bb2c6;
  margin-top: 10px;
  overflow: auto;
}
.tabs-tab {
  display: inline-block;
  padding: 4px 16px;
  margin-right: 6px;
  background: #19a38a;
  border: 1px solid #ccc;
  cursor: pointer;
  position: relative;
}
.tabs-tab-active {
  color: red;
  border: 3px solid ccc;
  font-weight: 700;
  font-size: 16px;
}
.tabs-content {
  padding: 10px 0px;
  color: black;
}
</style>
